<template>
  <div v-loading="listLoading">
    <el-form 
      :rules="rules" 
      ref="dataForm" 
      :model="temp" 
      label-width="100px" 
      style='width:600px;'
    >
      <!-- <el-form-item label="网站LOGO:" prop="frontLogo">
        <div class="singleup-view-box">
          <el-input v-model="temp.frontLogo" disabled></el-input>
          <el-button 
            class="view"
            @click="handleUploadViewThumb('frontLogo')" 
            type="success" 
            plain
            icon="el-icon-picture"
          >
            预览
          </el-button>
          <el-button 
            class="select"
            @click="handleUploadThumb('frontLogo')" 
            type="success" 
            plain>
            <span class="svg-container">
              <svg-icon icon-class="my-select"></svg-icon>
            </span>
            上传图片
          </el-button>
        </div>
      </el-form-item> -->
      <el-form-item label="二维码:" prop="QRCode">
        <div class="singleup-view-box">
          <el-input v-model="temp.QRCode" disabled></el-input>
          <el-button 
            class="view"
            @click="handleUploadViewThumb('QRCode')" 
            type="success" 
            plain
            icon="el-icon-picture"
          >
            预览
          </el-button>
          <el-button 
            class="select"
            @click="handleUploadThumb('QRCode')" 
            type="success" 
            plain>
            <span class="svg-container">
              <svg-icon icon-class="my-select"></svg-icon>
            </span>
            上传图片
          </el-button>
        </div>
      </el-form-item>
      <el-form-item label="400电话:" prop="phone400">
          <el-input v-model="temp.phone400" placeholder="请输入400电话" maxlength="99"></el-input>
      </el-form-item>
      <el-form-item>
          <el-button type="success" @click="handleSave('dataForm')" :loading="btnLoading">更新</el-button>
      </el-form-item>
    </el-form>

    <!-- 缩略图 - 裁切/上传 -->
    <el-dialog 
      @close="closeThumbCallback"
      :modal-append-to-body="false"
      title="LOGO上传" 
      :visible.sync="dialogFormVisible1" 
      :close-on-click-modal="false"
      width="600px"
      custom-class="my-el-dialog"
    >
      <template v-if="curHandleThumb === 'QRCode'">
        <image-upload
          ref="thumbUploadComp"
          :initimg="temp.QRCode"
          v-if="isrefreshThumb"
        >
          <!-- :setOption='{ fixed: true, fixedNumber: [1, 1]}' -->
        </image-upload>
      </template>
      <template v-if="curHandleThumb === 'frontLogo'">
        <image-upload
          ref="thumbUploadComp"
          :initimg="temp.frontLogo"
          v-if="isrefreshThumb"
        >
          <!-- :setOption='{ fixed: true, fixedNumber: [1, 1]}' -->
        </image-upload>
      </template>
      <div slot="footer" class="dialog-footer">
        <el-button type="success" @click="saveUpdateThumb" :loading="btnLoading" icon="el-icon-upload">上传</el-button>
        <el-button @click="dialogFormVisible1 = false;">取消</el-button>
      </div>
    </el-dialog>

    <!-- 缩略图 - 预览 -->
    <el-dialog 
      :modal-append-to-body="false"
      title="LOGO预览" 
      :visible.sync="dialogFormVisible2" 
      width="600px"
      custom-class="my-el-dialog"
    >
      <template v-if="curHandleThumb === 'QRCode'">
        <img :src="temp.QRCode" style="width:100%;">
      </template>
      <template v-if="curHandleThumb === 'frontLogo'">
        <img :src="temp.frontLogo" style="width:100%;">
      </template>
    </el-dialog>

  </div>
</template>

<script>
import ImageUpload from '@/components/ImageUpload'
import { uploadImgBase64 } from '@/api/common'
import { getList, updateSave } from '@/api/systemprofile'

export default {
  name: 'websiteSetting',
  computed: {
  },
  components: {
    ImageUpload
  },
  data() {
    return {
      curHandleThumb: '', // 当前所要操作的图片籽
      isrefreshThumb: false, //控制-缩略图-上传/裁切组件
      dialogFormVisible1: false, //缩略图-上传/裁切-框展示状态
      dialogFormVisible2: false, //缩略图-预览-框展示状态
      uploadPathPreview: [], // 缩略图预览-图片集合
      btnLoading: false,
      listLoading: false,
      temp: {
        frontLogo: '',
        QRCode: '',
        phone400: ''
      },
      rules: {
        // frontLogo: [{ required: true, message: '请输入收款公司', trigger: 'blur' }]
      },
      listQuery: {
        item: {
          webType: 'website'
        }
      }
    }
  },
  watch: {
  },
  created() {
    this.getList()
  },
  activated() {
  },
  deactivated() {
  },
  methods: {
    // 关闭缩略图-裁切/上传遮罩回调
    closeThumbCallback() {
      this.isrefreshThumb = false
    },
    // 保存上传缩略图
    saveUpdateThumb() {
      this.$refs.thumbUploadComp.$refs.cropper.getCropData((data) => {
        this.btnLoading = true
        uploadImgBase64({ base64Data: data }).then(response => {
          if (this.curHandleThumb === 'QRCode') {
            this.temp.QRCode = response.data.path
          }
          if (this.curHandleThumb === 'frontLogo') {
            this.temp.frontLogo = response.data.path
          }
          this.uploadPathPreview = []
          this.uploadPathPreview.push(response.data.path)
          this.$nextTick(function() {
            this.btnLoading = false
            this.dialogFormVisible1 = false
            this.isrefreshThumb = false
          })
        }).catch(err => {
          this.btnLoading = false
          err
        })
      })
    },
    // 取缩略图
    getThumb() {
      const _this = this
      return new Promise(function(resolve, reject) {
        _this.$refs.thumbUploadComp.$refs.cropper.getCropData((data) => {
          _this.thumbImgResource = data
          resolve()
        })
      })
    },
    // 缩略图上传图片预览
    handleUploadViewThumb(field) {
      this.curHandleThumb = field
      if (this.curHandleThumb === 'QRCode') {
        if (typeof this.temp.QRCode !== 'undefined' && this.temp.QRCode !== '') {
          this.dialogFormVisible2 = true
        } else {
          this.$message.warning({
            message: '请先上传图片',
            type: 'warning'
          })
        }
      }
      if (this.curHandleThumb === 'frontLogo') {
        if (typeof this.temp.frontLogo !== 'undefined' && this.temp.frontLogo !== '') {
          this.dialogFormVisible2 = true
        } else {
          this.$message.warning({
            message: '请先上传图片',
            type: 'warning'
          })
        }
      }
    },
    // 缩略图选择按钮触发
    handleUploadThumb(field) {
      this.curHandleThumb = field
      // 重新渲染裁切/上传组件
      this.isrefreshThumb = true
      this.$nextTick(function() {
        this.dialogFormVisible1 = true
      })
    },
    // 获取列表
    getList() {
      this.listLoading = true
      return getList(this.listQuery).then(response => {
        const rowset = response.data.lstItem
        for (const item of rowset) {
          switch (item.webKey) {
            case 'frontLogo':
              this.temp.frontLogo = item.webValue
              break
            case 'QRCode':
              this.temp.QRCode = item.webValue
              break
            case 'phone400':
              this.temp.phone400 = item.webValue
              break
          }
        }
        this.listLoading = false
      }).catch(err => {
        err
        this.listLoading = false
      })
    },
    handleSave(dataForm) {
      this.$refs[dataForm].validate(valid => {
        if (valid) {
          this.btnLoading = true
          const params = []
          for (const i in this.temp) {
            params.push({
              webType: 'website',
              webKey: i,
              webValue: this.temp[i],
              webDesc: ''
            })
          }
          updateSave(params).then(response => {
            this.btnLoading = false
            this.$notify({
              title: '成功',
              message: '修改成功',
              type: 'success',
              duration: 2000
            })
            this.getList()
          }).catch(() => {
            this.btnLoading = false
          })
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
</style>
